.new-title {
	padding: 24px 20px 0 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	&-img {
		font-weight: @rok-font-weight-bold;
		font-size: @rok-font-size-big;
		color: @rok-text-color;
		display: flex;
		align-items: center;

		.img {
			margin-right: 8px;
		}
	}
	&-end {
		color: @rok-text-color-secondary;
		font-size: 14px;
		cursor: pointer;
		&:hover {
			color: @rok-primary-hover-color;
		}
	}
}
.official {
	width: 100%;
	padding: 10px  24px 0 24px;
	border-radius: @rok-border-radius-big;
	display: flex;
	&-left {
		flex: 1;
		width: 200px;
		// margin-left: 20px;
		&-tabs {
			display: flex;
			margin-bottom: 10px;
			position: relative;
			&-item {
				min-width: 40px;
				margin-right: 20px;
				color: @rok-text-color-secondary;
				font-size: @rok-font-size-base;
				font-weight: @rok-font-weight-bold;
				cursor: pointer;
				display: flex;
				flex-direction: column;
				align-items: center;
				&:hover {
					color: @rok-primary-hover-color;
				}
			}
			.tab-icon-xiaolian {
				font-size: 38px;
				height: 10px;
				line-height: 10px;
				margin-top: 3px;
			}
			&-more {
				cursor: pointer;
				font-size: @rok-font-size-base;
				color: #999999;
				position: absolute;
				top: 0;
				right: 0;
			}
		}
	}
	&-right {
		margin-right: 20px;
		width: 400px;
		height: 248px;
	}
}
.details {
	width: 100%;
	&-item {
		width: 100%;
		max-width: 100%;
		height: 54px;
		line-height: 54px;
		font-size: @rok-font-size-base;
		color: @rok-text-color;
		display: flex;
		position: relative;
		cursor: pointer;
		&-text {
			flex: 1;
			display: flex;
			align-items: center;
			width: calc(100% - 96px);
			padding-right: 35px;
			.text-icon {
				margin-left: 4px;
				width: 26px;
				height: 16px;
				img {
					width: 100%;
					height: 100%;
				}
			}
		}
		&-date  {
			color: @rok-text-color-secondary;
		}
		&:hover {
			color: @rok-primary-hover-color;
			.details-item-date  {
				color: @rok-primary-hover-color;
			}
		}
		
	}
	&-item::after{
		width: 100%;
		content: "";
		background: @rok-Divider-color;
		position: absolute;
		left: 0;
		bottom: 0;
		height: 1px;
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
	}
	.details-item:last-child::after {
		height: 0;
	}
}
.carousel {
	width: 100%;
	margin-top: 8px;
	border-radius: @rok-border-radius-big;
	overflow: hidden;
	.slick-list {
		border-radius: @rok-border-radius-big;
	}
	.slick-next::before,
	.slick-prev:before {
		content: ''
	}
	&:hover {
		@keyframes arrowLeft {
			from {margin-left: 0;}
			to {margin-left:40px;}
		}
		@keyframes arrowRight {
			from {margin-right: 0;}
			to {margin-right:40px;}
		}
		.slick-arrow-left {
			margin-left:40px;
			animation-name: arrowLeft;
			animation-duration: 200ms;
		
		}
		.slick-arrow-right {
			margin-right: 40px;
			animation-name: arrowRight;
			animation-duration: 200ms;
		}
		
	}
	.carousel-box {
		width: 400px;
		height: 248px;
		cursor: pointer;
		img {
			width: 100%;
			height: 100%;
			border-radius: @rok-border-radius-big;
		}
		.carousel-text {
			position: absolute;
			bottom: 6px;
			width: 400px;
			height: 60px;
			line-height: 60px;
			color: @rok-white-color;
			font-weight: 500;
			font-size: @rok-font-size-title;
			border-radius: 0 0 @rok-border-radius-big @rok-border-radius-big;
			padding: 0 @rok-basic-padding;
			background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
			.ellipsis();
		}
	}
	.slick-arrow-left,
	.slick-arrow-right,
	.slick-arrow-right:hover,
	.slick-arrow-left:hover {
		width: 36px;
		height: 36px;
		background: rgba(0, 0, 0, 0.12);
		border-radius: 50%;
		z-index: 1;
		color: @rok-white-color;
		text-align: center;
		line-height: 36px;
	}
	.slick-arrow-right:hover,
	.slick-arrow-left:hover {
		background: rgba(0, 0, 0, .2);
	}
	.slick-arrow-left {
		display: none;
		margin-left: -10px;
	}
	.slick-arrow-right {
		display: none;
		margin-right: -10px;
	}
}
